<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html>
<html>
<head>
<title>整租模块</title>
<link href="${pageContext.request.contextPath}/houseDeal/css/bootstrap.css" rel="stylesheet" type="text/css"/>
<script src="${pageContext.request.contextPath}/houseDeal/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/houseDeal/js/scripts.js"></script>
<link href="${pageContext.request.contextPath}/houseDeal/css/styles.css" rel="stylesheet" type="text/css"/>
<link href="${pageContext.request.contextPath}/houseDeal/css/style.css"  rel="stylesheet" type="text/css" />	
<link href="${pageContext.request.contextPath}/houseDeal/css/default.css"  rel="stylesheet" type="text/css" />	
<link href="${pageContext.request.contextPath}/houseDeal/css/flexslider.css"  rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/houseDeal/css/popuo-box.css"  rel="stylesheet" type="text/css" />		
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">
		var flagJson = {"price": "", "layout": ""};
	    function priceInfo(obj){
	    	$("#houseInfo").off("click", ".nav-page a");
	   		var flag = $(obj).parent().parent().attr("data-flag");
	   		$(obj).attr("flag", "true");
	   		$(obj).css("color", "red");
	   		$(obj).siblings().removeAttr("flag");
	   		$(obj).siblings().css("color", "");
	   		delete flagJson[flag];
	   		var key, arr, upper;
	   		var search = {};
	   		for (key in flagJson) {
	   			$("#"+key+">h4>a").each(function(i, e) {
	   				if ($(e).attr("flag") == "true") {
	   					if (key != "layout") {
	   						upper = (key.substring(0, 1).toUpperCase()) + key.substring(1);
	   						search[key] = {};
	   						search[key]["max" + upper] = $(e).attr("data-max" + upper);
	   						search[key]["min" + upper] = $(e).attr("data-min" + upper);
	   						return false;
	   					} else {
	   						search[key] = $(e).attr("data-Layout");
	   						return false;
	   					}
	   				}
	   			});
	   		}
	   		flagJson[flag] = "";
	   		if (flag !== "layout" && $(obj).attr("id") !== "submit") {
	   			upper = (flag.substring(0, 1).toUpperCase()) + flag.substring(1);
	   			search[flag] = {};
   				search[flag]["max" + upper] = $(obj).attr("data-max" + upper);
   				search[flag]["min" + upper] = $(obj).attr("data-min" + upper);
	   		} else {
	   			search[flag] = $(obj).attr("data-Layout");
	   		}
	   		search["keyword"] = $("#keyword").val();
			$.ajax({
				type : "post",
				url : '${pageContext.request.contextPath}/houseDeal/house-totalRent-ajax.do',
				dataType : "json",
				data : {"condition": JSON.stringify(search)},
				traditional : true,
				error : function(request) {
					alert("Connection error");
				},
				success : function(data) {
					if (data.lists.length !== 0) {
						var str = `<div class="box-sin"><div class="col-md-9 single-box">`, houseInfo;
						for (var i = 0; i < data.lists.length; i++) {
							var imgs = data.lists[i].houseImg.split("#");
							houseInfo = data.lists[i];
							str += '<div class="box-col">\
										<div class=" col-sm-7 left-side ">\
											<a href="${pageContext.request.contextPath}/houseDeal/totalRentHouseDetail.do?id='+houseInfo.houseId+'">\
											<img class="img-responsive" src="'+imgs[0]+'" alt=""></a>\
										</div>\
										<div class="col-sm-5 middle-side">\
											<h4>可立即出租</h4>\
											<p><span class="bath4">租房类型:</span> <span class="two">'+houseInfo.houseLayout+'</span></p>\
											<p><span class="bath4">租房面积:</span> <span class="two">'+houseInfo.houseArea+'平米</span></p>\
											<p><span class="bath4">租房地址:</span> <span class="two">'+houseInfo.houseAddress+'</span></p>\
											<p><span class="bath4">出租价格:</span> <span class="two">'+houseInfo.housePrice+'元</span></p>\
											<p><span class="bath4">中介账户:</span> <span class="two">'+houseInfo.houseAgentAccount+'</span></p>\
											<p><span class="bath4">中介电话:</span> <span class="two">'+houseInfo.houseAgentTele+'</span></p>\
									</div>\
								</div>\
							</div>';
						}
							str += '<div class="clearfix"></div>\
							<div class="nav-page">\
								<nav>\
									<span>';
							if (parseInt(data.currentPage) !== 1) {
								str += ' <a href="${pageContext.request.contextPath}/houseDeal/house-totalRent-ajax.do?currentPage=1">[首页]</a>&nbsp &nbsp\
            						<a href="${pageContext.request.contextPath}/houseDeal/house-totalRent-ajax.do?currentPage='+(parseInt(data.currentPage)-1)+'">[上一页]</a>&nbsp &nbsp';
							}
							str += '</span><span>第'+data.currentPage +'/'+data.totalPage+'页</span>&nbsp;&nbsp;<span>';
							if (data.currentPage !== data.totalPage) {
								str += '<a href="${pageContext.request.contextPath}/houseDeal/house-totalRent-ajax.do?currentPage='+(parseInt(data.currentPage)+1)+'">[下一页]</a>&nbsp &nbsp\
          							 <a href="${pageContext.request.contextPath}/houseDeal/house-totalRent-ajax.do?currentPage='+parseInt(data.totalPage)+'">[尾页]</a>&nbsp &nbsp';
							}
							str += `</span></nav></div>`;
							$("#houseInfo").html(str);
					} else {
						$("#houseInfo").text("无房屋信息！");
					}
					$("#houseInfo").on("click", ".nav-page a", function(e) {
						e.preventDefault();
					$.ajax({
						type : "post",
						url : this.href,
						dataType : "json",
						data : {
							"condition" : JSON.stringify(search),
						},
						traditional : true,
						error : function(request) {
							alert("Connection error");
						},
						success : function(data) {
							if (data.lists.length !== 0) {
								var str = `<div class="box-sin"><div class="col-md-9 single-box">`,
									houseInfo;
								for (var i = 0; i < data.lists.length; i++) {
									var imgs = data.lists[i].houseImg.split("#");
									houseInfo = data.lists[i];
									str += '<div class="box-col">\
										<div class=" col-sm-7 left-side ">\
											<a href="jsp/houseDetail.jsp">\
											<img class="img-responsive" src="'+imgs[0]+'" alt=""></a>\
										</div>\
										<div class="col-sm-5 middle-side">\
											<h4>可立即出租</h4>\
											<p><span class="bath4">租房类型:</span> <span class="two">'+houseInfo.houseLayout+'</span></p>\
											<p><span class="bath4">租房面积:</span> <span class="two">'+houseInfo.houseArea+'平米</span></p>\
											<p><span class="bath4">租房地址:</span> <span class="two">'+houseInfo.houseAddress+'</span></p>\
											<p><span class="bath4">出租价格:</span> <span class="two">'+houseInfo.housePrice+'元</span></p>\
											<p><span class="bath4">中介账户:</span> <span class="two">'+houseInfo.houseAgentAccount+'</span></p>\
											<p><span class="bath4">中介电话:</span> <span class="two">'+houseInfo.houseAgentTele+'</span></p>\
									</div>\
								</div>\
							</div>\
							<div class="clearfix"></div>\
							<div class="nav-page">\
								<nav>\
									<span>';
									if (parseInt(data.currentPage) !== 1) {
										str += ' <a href="${pageContext.request.contextPath}/houseDeal/house-totalRent-ajax.do?currentPage=1">[首页]</a>&nbsp;&nbsp;\
            						<a href="${pageContext.request.contextPath}/houseDeal/house-totalRent-ajax.do?currentPage=' + (parseInt(data.currentPage) - 1) + '">[上一页]</a>&nbsp;&nbsp;'
									}
									str += '</span><span>第' + data.currentPage + '/' + data.totalPage + '页</span>&nbsp;&nbsp;<span>';
									if (data.currentPage !== data.totalPage) {
										str += '<a href="${pageContext.request.contextPath}/houseDeal/house-totalRent-ajax.do?currentPage=' + (parseInt(data.currentPage) + 1) + '">[下一页]</a>\
          							 <a href="${pageContext.request.contextPath}/houseDeal/house-totalRent-ajax.do?currentPage=' + parseInt(data.totalPage) + '">[尾页]</a>'
									}
									str += `</span></nav></div>`;
									$("#houseInfo").html(str);
								}
							} else {
								$("#houseInfo").text("无房屋信息！");
							}
						}
					});
				});
				}
			});
	   };
	</script>
</head>
<body>
	<div class="header">
	<div class="container">
		<!--logo-->
			<div class="logo">
				<h1><a href="${pageContext.request.contextPath}/users/jsp/index.jsp">优购房</a></h1>
			</div>
		<!--//logo-->
		<div class="top-nav">
			<ul class="right-icons">
				<li><span ><i class="glyphicon glyphicon-phone"> </i>联系方式:666-6666666</span></li>
							<c:if test="${u.userAccount == null}">
								<li><a href='UserLogin.jsp'><i class='glyphicon glyphicon-user'></i>登录/注册</a></li>
							</c:if>
							<c:if test="${u.userAccount != null}">
								<li><a  href='${pageContext.request.contextPath}/users/jsp/MyJsp.jsp'><i class='glyphicon glyphicon-user'></i>${u.userAccount}</a></li>
							</c:if>		
				<li><a class="play-icon popup-with-zoom-anim" href="#small-dialog"><i class="glyphicon glyphicon-search"> </i> </a></li>
				
			</ul>
			<div class="nav-icon">
				<div class="hero fa-navicon fa-2x nav_slide_button" id="hero">
						<a href="#"><i class="glyphicon glyphicon-menu-hamburger"></i> </a>
					</div>	
				<!---
				<a href="#" class="right_bt" id="activator"><i class="glyphicon glyphicon-menu-hamburger"></i>  </a>
			--->
			</div>
		<div class="clearfix"> </div>
			<!---pop-up-box---->
			   
				<link href="${pageContext.request.contextPath}/users/css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/>
				<script src="${pageContext.request.contextPath}/users/js/jquery.magnific-popup.js" type="text/javascript"></script>
			<!---//pop-up-box---->
				<div id="small-dialog" class="mfp-hide">
					    <!----- tabs-box ---->
				<div class="sap_tabs">	
				     <div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
						  <ul class="resp-tabs-list">
						  	  <li class="resp-tab-item " aria-controls="tab_item-0" role="tab"><span>All Homes</span></li>
							  <li class="resp-tab-item" aria-controls="tab_item-1" role="tab"><span>For Sale</span></li>
							  <li class="resp-tab-item" aria-controls="tab_item-2" role="tab"><span>For Rent</span></li>
							  <div class="clearfix"></div>
						  </ul>				  	 
						  <div class="resp-tabs-container">
						  		<h2 class="resp-accordion resp-tab-active" role="tab" aria-controls="tab_item-0"><span class="resp-arrow"></span>All Homes</h2><div class="tab-1 resp-tab-content resp-tab-content-active" aria-labelledby="tab_item-0" style="display:block">
								 	<div class="facts">
									  	<div class="login">
											<input type="text" value="Search Address, Neighborhood, City or Zip" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search Address, Neighborhood, City or Zip';}">		
									 		<input type="submit" value="">
									 	</div>        
							        </div>
						  		</div>
							     <h2 class="resp-accordion" role="tab" aria-controls="tab_item-1"><span class="resp-arrow"></span>For Sale</h2><div class="tab-1 resp-tab-content" aria-labelledby="tab_item-1">
									<div class="facts">									
										<div class="login">
											<input type="text" value="Search Address, Neighborhood, City or Zip" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search Address, Neighborhood, City or Zip';}">		
									 		<input type="submit" value="">
									 	</div> 
							        </div>	
								 </div>									
							      <h2 class="resp-accordion" role="tab" aria-controls="tab_item-2"><span class="resp-arrow"></span>For Rent</h2><div class="tab-1 resp-tab-content" aria-labelledby="tab_item-2">
									 <div class="facts">
										<div class="login">
											<input type="text" value="Search Address, Neighborhood, City or Zip" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search Address, Neighborhood, City or Zip';}">		
									 		<input type="submit" value="">
									 	</div> 
							         </div>	
							    </div>
					      </div>
					 </div>
					 <script src="${pageContext.request.contextPath}/users/js/easyResponsiveTabs.js" type="text/javascript"></script>
				    	<script type="text/javascript">
						    $(document).ready(function () {
						        $('#horizontalTab').easyResponsiveTabs({
						            type: 'default', //Types: default, vertical, accordion           
						            width: 'auto', //auto or any width like 600px
						            fit: true   // 100% fit in a container
						        });
						    });
			  			 </script>	
				</div>
				</div>
				 <script>
						$(document).ready(function() {
						$('.popup-with-zoom-anim').magnificPopup({
							type: 'inline',
							fixedContentPos: false,
							fixedBgPos: true,
							overflowY: 'auto',
							closeBtnInside: true,
							preloader: false,
							midClick: true,
							removalDelay: 300,
							mainClass: 'my-mfp-zoom-in'
						});
																						
						});
				</script>
					
	
		</div>
		<div class="clearfix"> </div>
		</div>	
</div>
	<div class=" banner-buying">
		<div class=" container">
			<div class="clearfix"></div>
		</div>
	</div>
	<div class="search" >
		<input type="text" value="" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '搜索房屋信息';}" name="keyword" id = "keyword">	
		<input type="submit" value="" onclick="priceInfo(this)" id = "submit">	
	</div>
	<div class="single">
	   <div class="container">
		  <div class="single-buy">
			<div class="row-sm-3 check-top-single">
				<div class="single-bottom" id="price" data-flag="price">		
					<h4>价格：&nbsp &nbsp<a style="color:red" href="javascript:void(0)" data-minPrice="0" data-maxPrice="100000" onclick="priceInfo(this)">不限</a> &nbsp &nbsp&nbsp &nbsp &nbsp&nbsp
							   <a href="javascript:void(0)" data-minPrice="0" data-maxPrice="1000" onclick="priceInfo(this)">1000以下</a> &nbsp &nbsp&nbsp &nbsp
							   <a href="javascript:void(0)" data-minPrice="1000" data-maxPrice="3000" onclick="priceInfo(this)">1000-3000</a>&nbsp &nbsp&nbsp &nbsp &nbsp&nbsp
							   <a href="javascript:void(0)" data-minPrice="3000" data-maxPrice="5000" onclick="priceInfo(this)">3000-5000</a>&nbsp &nbsp&nbsp &nbsp &nbsp&nbsp
							   <a href="javascript:void(0)" data-minPrice="5000" data-maxPrice="10000" onclick="priceInfo(this)">5000-10000</a>&nbsp &nbsp&nbsp   &nbsp &nbsp&nbsp
							   <a href="javascript:void(0)" data-minPrice="10000" data-maxPrice="100000" onclick="priceInfo(this)">10000以上</a></h4><br>
				</div>
			</div>
			<div class="row-sm-3 check-top-single">
				<div class="single-bottom" id="layout" data-flag="layout">
					<h4>厅室：&nbsp &nbsp<a style="color:red" href="javascript:void(0)" data-Layout="0"  onclick="priceInfo(this)">不限</a> &nbsp &nbsp&nbsp &nbsp &nbsp&nbsp
								<a href="javascript:void(0)" data-Layout="1"  onclick="priceInfo(this)">一室</a>  &nbsp &nbsp&nbsp &nbsp &nbsp&nbsp	
								<a href="javascript:void(0)" data-Layout="2"  onclick="priceInfo(this)">两室</a>  &nbsp &nbsp&nbsp &nbsp &nbsp&nbsp
								<a href="javascript:void(0)" data-Layout="3"  onclick="priceInfo(this)">三室</a>  &nbsp &nbsp&nbsp &nbsp &nbsp&nbsp
								<a href="javascript:void(0)" data-Layout="4"  onclick="priceInfo(this)">三室以上</a> </h4><br>
				</div>
			</div>	
		 </div>
		 <div class="clearfix"> </div>
	   </div>
	</div>
		<div class="container">
			<div class="buy-single">
			<h3>出租住房</h3>
				<div id="houseInfo">
				<c:choose>
					<c:when test="${empty requestScope.pageHouseInfo.lists}">
						无房屋信息！
					</c:when>
					<c:otherwise>
						<div class="box-sin">
						<div class="col-md-9 single-box">
							<c:forEach items="${requestScope.pageHouseInfo.lists}" var="p">
								<div class="box-col">
									<div class=" col-sm-7 left-side ">
										<a href="${pageContext.request.contextPath}/houseDeal/totalRentHouseDetail.do?id=${p.houseId}"> 
										<c:set value="${ fn:split(p.houseImg, '#') }" var="str1" />
										<img class="img-responsive" src="${str1[0]}" alt=""></a>
									</div>
									<!-- 信息显示 -->
									<div class="col-sm-5 middle-side">
										<h4>可立即出租</h4>
										<p><span class="bath4">租房类型:</span> <span class="two">${p.houseLayout }</span></p>
										<p><span class="bath4">租房面积:</span> <span class="two">${p.houseArea }平米</span></p>
										<p><span class="bath4">租房地址:</span> <span class="two">${p.houseAddress }</span></p>
										<p><span class="bath4">出租价格:</span> <span class="two">${p.housePrice}元</span></p>
										<p><span class="bath4">中介账户:</span> <span class="two">${p.houseAgentAccount }</span>
										<p><span class="bath4">中介电话:</span> <span class="two">${p.houseAgentTele}</span></p>
									</div>
								</div>
							</c:forEach>
						</div>
					</div>
					<div class="clearfix"></div>
					<div class="nav-page">
						<nav>
							<span> 
							<c:if test="${requestScope.pageHouseInfo.currentPage != 1}">
									<a href="${pageContext.request.contextPath }/houseDeal/totalRent.do?currentPage=1&minPrice=0&maxPrice=100000&layout=0">[首页]</a>&nbsp;&nbsp;
            						<a href="${pageContext.request.contextPath }/houseDeal/totalRent.do?currentPage=${requestScope.pageHouseInfo.currentPage-1}&minPrice=0&maxPrice=100000&layout=0">[上一页]</a>&nbsp;&nbsp;
       						 </c:if>
							</span>
							 <span>第${requestScope.pageHouseInfo.currentPage }/${requestScope.pageHouseInfo.totalPage}页</span>&nbsp;&nbsp;
							  <span>
								<c:if test="${requestScope.pageHouseInfo.currentPage != requestScope.pageHouseInfo.totalPage}">
									 <a href="${pageContext.request.contextPath }/houseDeal/totalRent.do?currentPage=${requestScope.pageHouseInfo.currentPage+1}&minPrice=0&maxPrice=100000&layout=0">[下一页]</a>&nbsp;&nbsp;
          							 <a href="${pageContext.request.contextPath }/houseDeal/totalRent.do?currentPage=${requestScope.pageHouseInfo.totalPage}&minPrice=0&maxPrice=100000&layout=0">[尾页]</a>
       						   </c:if>
							</span>
						</nav>
					</div>
					</c:otherwise>
				</c:choose>
				</div>
			</div>
	</div>	
	
</body>
</html>